<template>
    <head>
    <meta charset="UTF-8">
     <title>CreateClub
     </title>
   </head>
  
    <!-- <el-container>
      <el-header>
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/'}">活动</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/'}">创建活动</el-breadcrumb-item>
        </el-breadcrumb>
       </el-header>
      <el-main> -->
        
  <div class="createform-container">

  
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="AName">
      <el-input style="width: 350px" v-model="ruleForm.AName"></el-input>
    </el-form-item>
    <el-form-item   label="活动负责人姓名" prop="managerName">
      <el-input style="width: 350px" v-model="ruleForm.managerName"></el-input>
    </el-form-item>
    <el-form-item  label="活动负责人学号" prop="managerID">
      <el-input style="width: 350px" v-model="ruleForm.managerID"></el-input>
    </el-form-item>

    <!-- 活动社团可以通过上一个页面传过来得到 所以不用写 -->
    <!-- <el-form-item label="活动社团" prop="cid">
      <el-input v-model="ruleForm.cid"></el-input>
    </el-form-item> -->
    
    <el-form-item   label="活动类型" prop="type">
        <el-select style="width: 350px" v-model="ruleForm.type" placeholder="请选择活动类型...">
      <el-option label="思想政治类" value=1></el-option>
      <el-option label="学术科技类" value=2></el-option>
      <el-option label="体育竞技类" value=3></el-option>
      <el-option label="志愿公益类" value=4></el-option>
      <el-option label="文化艺术类" value=5></el-option>
    </el-select>
    </el-form-item>
  
  <!-- 社团所在校区 -->
  <el-form-item   label="举办校区" prop="campus">
    <el-select style="width: 350px" v-model="ruleForm.campus" placeholder="请选择校区...">
      <el-option label="南校区" value=1></el-option>
      <el-option label="北校区" value=2></el-option>
      <el-option label="珠海校区" value=3></el-option>
      <el-option label="深圳校区" value=4></el-option>
      <el-option label="北校区" value=5></el-option>
      <el-option label="五校园" value=6></el-option>
    </el-select>
  </el-form-item>

  <el-form-item   label="活动详细地址" prop="place">
    <el-input style="width: 350px" v-model="ruleForm.place"></el-input>
  </el-form-item>
  
  <el-form-item label="仅社团成员可报名" prop="permission">
    <el-switch style="margin-left: 10px" v-model="ruleForm.permission"></el-switch>
  </el-form-item>

  <el-form-item style="width: 450px"  label="报名时间" required>
    <div class="block">
    <!-- <span class="demonstration">默认</span> -->
    <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        
        @change="handleDateChange">
      </el-date-picker>

    </div>

    </el-form-item>
  


  <el-form-item label="活动内容" prop="content" required>
    <el-input style="width: 450px" type="textarea" v-model="ruleForm.content"></el-input>
  </el-form-item>
  <el-form-item label="加入要求" prop="requirement">
    <el-input style="width: 450px" type="textarea" v-model="ruleForm.requirement"></el-input>
  </el-form-item>

  <el-form-item label="创建活动申请表" >
    <a href="https://digital-baituan-filestore.oss-cn-beijing.aliyuncs.com/files/defaultFile/%E3%80%8A%E5%88%9B%E5%BB%BA%E6%B4%BB%E5%8A%A8%E7%94%B3%E8%AF%B7%E8%A1%A8%E3%80%8B.docx">《创建活动申请表》</a>
</el-form-item>
  
  
  <el-form-item label="上传申请表：" >
    <input  type="file" @change="handleFileChange">
  </el-form-item>

  
   <!-- 确认按钮和重置按钮 -->
   <el-form-item>
    <el-button type="primary" @click="handleCreate()">确定创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置信息</el-button>
  </el-form-item>
</el-form>
  
  
          </div>
  
      <!-- </el-main>
      </el-container> -->
  
  </template>
  
  <script>
  
  import axios from 'axios';
      import { ElMessage } from 'element-plus';
      export default {
        name: 'CreateAct',
        data(){
            return{
              uid:'',
              create_state:'',
              kind:3,
              dateRange: [null, null],
                ruleForm: {
                AName:'', //活动名称                
                cid:'',
                startTime:'',
                endTime:'',
                permission:'',
                type:'',
                campus:'',
                place:'',
                stime:'',
                etime:'',
                requirement:'',
                content:'',
                file:'', 
                managerID:'',
                managerName:'',
                CreateTime:'',
          },

       rules: {},

            }
        },
    //     computed: {
    //   startTime() {
    //     return this.dateRange[0];
    //   },
    //   endTime() {
    //     return this.dateRange[1];
    //   }
    // },
        methods:{

          //处理“确认创建”按钮的函数
                   //处理“确认创建”按钮的函数
                   handleCreate(){
            if (!this.selectedFile) {
        alert('Please select a file.');
        return;
        }
        this.submitForm('ruleForm');
      },

          submitForm(formName) {
        //检查表单是否通过验证
          this.$refs[formName].validate((valid) => {
  
            if (valid) {
              alert('submit!');
              this.ruleForm.CreateTime =this.getCurrentDateTime();
              const CreateActData = new FormData();
              CreateActData.append('file', this.selectedFile);
              CreateActData.append('uid',this.ruleForm.uid)
              CreateActData.append('cid',this.ruleForm.cid)
              CreateActData.append('AName',this.ruleForm.AName)
              CreateActData.append('startTime',this.ruleForm.startTime)
              CreateActData.append('endTime',this.ruleForm.endTime)
              CreateActData.append('campus',this.ruleForm.campus)
              CreateActData.append('place',this.ruleForm.place)
              CreateActData.append('type',this.ruleForm.type)
              CreateActData.append('permission',this.ruleForm.permission)
              CreateActData.append('stime',this.ruleForm.startTime)
              CreateActData.append('etime',this.ruleForm.endTime)
              CreateActData.append('requirement',this.ruleForm.requirement)
              CreateActData.append('content',this.ruleForm.content)
              CreateActData.append('file',this.ruleForm.file)
              CreateActData.append('managerID',this.ruleForm.managerID)
              CreateActData.append('CreateTime',this.ruleForm.CreateTime)
                         
              axios.post('api/activity/createAct', CreateActData)
              .then(response => {
                this.create_state = response.data.data.state
                if(this.create_state== 0 ){
                  this.$message({
                message: '无法找到负责人信息！请重新填写！',
                type: 'error'});
                }
                else{
                  ElMessage.success("您已成功提交创建活动申请！");
                  console.log('Form submitted successfully:', response);
                }
              
  
              })
              .catch(error => {
                console.error('Error submitting form:', error);
              });
            } 
            
            else {
              alert('请将信息填写完整！')
              console.log('error submit!!');
              return false;
            }
          });
        },

    //重置表单的信息
    resetForm(formName) {
    this.$refs[formName].resetFields();
    this.$message({
            message: '已重置信息！',
            type: 'success'
          });
      },

        //处理文件变化的函数
      handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },

        //活动创建申请文件上传
        async uploadFile() {
      
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      formData.append('kind', this.kind);
      try {
        const response = await axios.post('http://localhost:8080/uploadFile', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('Success:', response.data);
        alert('File uploaded successfully!'); //8081端口显示：....
      } catch (error) {
        console.error('Error:', error);
        alert('Failed to upload file.');
      }
    },

  
        // 时间赋值
      //   handleDateChange(value) {
      //   // value 是一个数组，包含开始时间和结束时间
      //   this.dateRange = value;
      //   console.log(this.dateRange);
      //   // console.
      // },

      handleDateChange(value) {
        this.dateRange =value;
      // dateRange 是一个数组，包含开始日期和结束日期的 Date 对象
      const startDate = this.dateRange[0];
      const endDate = this.dateRange[1];
      
      // 格式化日期时间为 'YYYY-MM-DD HH:mm:ss'
      const formattedStartDate = this.formatDateTime(startDate);
      const formattedEndDate = this.formatDateTime(endDate);

      console.log('Formatted Start Date:', formattedStartDate);
      console.log('Formatted End Date:', formattedEndDate);
      
      this.ruleForm.startTime = formattedStartDate;
      this.ruleForm.endTime = formattedEndDate;
      // 可以在这里进行进一步的处理，比如传递给后端或者更新其他数据
    
  },
  formatDateTime(date) {
    // 将日期对象格式化为 'YYYY-MM-DD HH:mm:ss' 格式
    const year = date.getFullYear();
    const month = this.padZero(date.getMonth() + 1);
    const day = this.padZero(date.getDate());
    const hours = this.padZero(date.getHours());
    const minutes = this.padZero(date.getMinutes());
    const seconds = this.padZero(date.getSeconds());
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  },
  padZero(num) {
    return num < 10 ? `0${num}` : num;
  },
    getCurrentDateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并且保证两位数
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

    return formattedDateTime;
    },

  
        }
      }
  
  </script>
  
  <style>
  
  .createform-container{
margin-left: 340px;
background-color: #fff;
padding-left: 60px;
padding-top:50px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 700px;
height: 700px;
}
  </style>
  